<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="drawerOpen"
      append-to-body
      size="900px"
      custom-class="dv_drawer"
    >
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="所有问题（3）" name="first" />
          <el-tab-pane label="未修改（2）" name="second" />
          <el-tab-pane label="已修改（1）" name="third" />
        </el-tabs>
        <div class="content">
          <div v-for="(item,index) in listCopy" :key="index" class="content_item">
            <div class="content_item_title">
              <span>{{ item.title }}</span>
              <el-tag :type="item.status===1?'success':'danger'">{{ ['未修改','已修改'][item.status] }}</el-tag>
            </div>
            <div class="content_item_text">
              <div class="prepend">{{ item.key }}</div>
              <el-date-picker
                v-if="item.type==='date'"
                v-model="item.newValue"
                type="date"
                :disabled="item.status === 1"
                value-format="yyyy-MM-dd"
                class="w-100"
                placeholder="请选择"
              />
              <el-input v-else v-model="item.newValue" placeholder="请输入内容" class="input-with-select" />
              <el-button v-if="item.status === 0" slot="append" type="primary" icon="el-icon-check" class="ml-10" circle />
            </div>
          </div>
        </div>
      </div>
      <div class="drawer-footer">
        <el-button @click="drawerOpen=false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  components: {

  },
  data() {
    return {
      title: '',
      drawerOpen: false,
      list: [
        {
          title: '立案时间错填',
          key: '立案时间',
          status: 1,
          type: 'date',
          newValue: '2025-03-22'
        }, {
          title: '采取强制及措施时间/种类漏填',
          key: '采取强制及措施时间/种类',
          status: 0
        }, {
          title: '侦查机关及侦查人员漏填',
          key: '侦查机关及侦查人员',
          status: 0
        }
      ],
      listCopy: [],
      activeName: 'first'
    }
  },
  methods: {
    open(rowData) {
      this.title = rowData.ajlb + ' > ' + rowData.ajmc
      this.drawerOpen = true
      this.listCopy = JSON.parse(JSON.stringify(this.list))
    },
    handleClick(tab) {
      if (tab.name === 'second') {
        this.listCopy = this.list.filter(item => item.status === 0)
      } else if (tab.name === 'third') {
        this.listCopy = this.list.filter(item => item.status === 1)
      } else {
        this.listCopy = JSON.parse(JSON.stringify(this.list))
      }
    }

  }
}
</script>

<style scoped lang='scss'>
::v-deep{
  .el-tabs__nav-wrap{
    padding: 0 10px;
  }
  .el-tabs__content{
    height: 0;
  }
  .el-input__inner{
    border-radius: 0;
  }
}
.content_item{
  border: 1px solid #e0e0e0;
  margin: 0 15px 15px;
  padding: 10px;
  .content_item_title{
    display: flex;
    justify-content: space-between;
  }
  .content_item_text{
    display: flex;
    margin-top: 10px;
    align-items: center;
    .prepend{
      width: 230px;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      border: 1px solid #DCDFE6;
      border-right: 0;
    }
  }
}
</style>
